A PageInspector Tutorial

After completing this tutorial, you will be able to:

Check a file
Locate HTML errors within a file
Correct HTML errors from within PageInspector
Save a corrected file
Open a file as Read Only so that it can be edited within another application.

Using PageInspector to Correct Errors

Open the folder "Sample Files", which is in the PageInspector Folder.
Select the file named "Tutorial", and choose "Duplicate" from the "File" menu.
Launch PageInspector by double-clicking its icon in the Finder.
Choose "Open..." from the File menu.
Open the file "Tutorial copy" (It is in the "Sample Files" Folder).
When the scan is complete, browse through the Errors window, and highlight each error in turn.
The preview box (at the bottom of the Errors window) shows the location in the HTML file of the highlighted error.
Highlight the First Error: "File name does not end with .htm or .html".
To Correct: Go to the Finder, and rename "Tutorial copy" to "Tutorial.html". Return to PageInspector to see what happens.
Highlight the Second Error: ""bad/link/so/you/can/fix/it.html" Unable to find link.".
To Correct: Click the "Fix" button, and play around with the link picker.
Highlight the Third Error: ""naturalsizeflag" This is a non-standard attribute added by PageMill/SiteMill".
PageMill adds its own attribute, naturalsizeflag to all "<img>" tags.
To Correct: Click the "Trash" button.
Highlight the Fourth Error: ""<x-sas-window>" This is a non-standard tag added by HomePage.".
HomePage adds its own tag, "<x-sas-window>" to the start of all its documents.
To Correct: Click the "Trash" button.
Highlight the Fifth Error: ""0A94A2" Hex colour codes must be preceded by "#".".
When using colour codes instead of defined colour names, the code should be preceded by a hash.
To Correct: Click the "Fix" button, and a hash will be added to the beginning of the colour code.
Highlight the Sixth Error: "'' This tag must be closed before '' is closed." This an example of an overlapping tag. The "" tag was opened within "", and therefore it must be closed before "" is closed.
To Correct: PageInspector cannot fix this error. You must correct it in a text editor.
Highlight the Seventh Error: "<brw> Unrecognised tag." The author of this page had meant to type "br", but actually typed "brw".
To Correct: Click on the "Fix" button (the one with the green tick), and type in the tag as it should be.
Highlight the Eighth Error: "'DurianFont' This font is not installed on this Macintosh." This file contains the tag "". However, because the font "DurianFont" is not installed on the Macintosh you are using, PageInspector has reported this error.
To Correct: PageInspector cannot fix this error. You must correct it in a text editor.
Highlight the Ninth Error: ""value" This is not an attribute of <li> unless it is in an ordered list." This "<LI>" tag is in an unordered list, and so it cannot use the attribute "value", which is exclusive to ordered lists.
To Correct: Click the "Fix" button, and the "value" attribute will be deleted.
Highlight the Tenth Error: "'</li>' This tag has no corresponding "<li>" tag." You can see in the errors preview box that two "<LI>" tags are being opened, without a "</LI>" between them. This is correct syntax - PageInspector doesn't make you close "<LI>" tags; this is optional. However, just because you opened two "<LI>" tags doesn't mean you can close two "</LI>" tags after each other - you are not nesting the tags. This is what PageInspector is complaining about.
To Correct: Click the "Trash" button, and the second "</LI>" will be deleted.
Highlight the Eleventh Error: "'mailto://' The two '/'s need to be deleted." When you link to an email address in HTML, you must use the format "href="mailto:who@whatever.com", not "href="mailto://who@whatever.com".
To Correct: PageInspector cannot fix this error. You must correct it in a text editor.
Highlight the Twelfth Error: "'>' This character has no corresponding '<'." The '>' character is used in HTML to end a tag. If you want a greater than sign in your document, you must use '<'.
To Correct: Click the "Fix" button. PageInspector will replace '>' with '<'.
Highlight the Thirteenth Error: "'</h1>' This tag has no corresponding '<h1>' tag." This is just a simple case of closing a tag you have never opened, or have closed already.
To Correct: Click the "Trash" button to delete the entire tag.
You have now fixed up all the errors that you can from within PageInspector. To fix the remaining files, you need to open up the file in a text editor, but first we need to save the open file. Go to the "File" menu and choose "Save"
Choose "Close" from the "File" menu. The topmost window will be closed. Choose "Close" again from the "File" menu to close the second window.
Shortcut: To close all open windows, press Command-Option-w or hold down the option key while choosing "Close" from the "File" menu.
Double Click on the file "Tutorial.html", which should be in the "Sample Files" folder. It should open up in "SimpleText".
Locate the overlap error: " but they are wrong!".
To Correct: Rearrange the "" and "" tags - it should now read " but they are wrong!".
Locate the next error: "".
To Correct: You can do one of two things here:
1. Replace "DurianFont" with the name of a font you have got installed on your Macintosh, or
2. Delete "DurianFont" and the comma as well, so that the font "Geneva" will be used instead.
Locate the final error - 'href="mailto://recipes@bad.tasting.fruit.com"'.
To Correct: Just delete the "//", so you have got 'href="mailto:recipes@bad.tasting.fruit.com"'.
This file now contains no errors! Go to the "File" menu and choose "Save"
Choose "Quit" from the "File" menu to exit SimpleText.
If you wish, you may return to PageInspector and open the fixed file just to make sure everything is OK.
Return to the Finder. Trash the file "Tutorial.html" (the file you have corrected).

Using a Text Editor to Correct Errors

In the Finder, select the file "Tutorial" which is in the "Sample Files" folder, and choose "Duplicate" from the "File" menu.
Open the file "Tutorial copy", but this time click on the check box "Read Only" in the Open dialog.
When the scan is complete, highlight a few of the errors. You will notice that an icon of a pencil with a line through it appears in the top right-hand corner of the Info window. This icon indicates that PageInspector cannot write to this file - either because it has been opened as read only, or because the file is locked.
Launch a text editor - SimpleText, BBEdit, QUED/M, CodeWarrior, etc.
Use the text editor to open the same file that is open in PageInspector. You can use the text editor (in parallel with PageInspector) to fix up any errors that PageInspector finds.
Because PageInspector has opened the file read only, your text editor is able to save the file.

Return to the Contents Page